class PayCustAliApplying extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            customers : [],
            userView : {}
        }
    }

    componentDidMount(){
        this.refs.table.refresh();
    }

    updateTable(page,pageSize){
        postJson("/customer/pay/findAlipayApplying.x",{page:page,pageSize:pageSize},(data)=>{
            this.pageCount = data.data.size;
            this.setState({customers : data.data.list});
        })
    }

    complete(id){
        layui.layer.confirm("确定要更新此条目状态么，更新后，不可恢复",()=>{
            postJson("/customer/pay/saveSecretState.x",{id:id,state:0},()=>{
                layui.layer.msg("更新成功");
                this.refs.table.refresh();
            })
        })
    }

    view(userCode){
        postJson("/user/view.x",{userCode:userCode},(data)=>{
            this.setState({userView:data.data},()=>{
                this.refs.modalUserDetail.show();
            })
        })
    }

    getUserCommsSelect(comms){
        if(!comms)
            return (<option value="">未绑定小区</option>)
        else{
            let commList = comms.split(",");
            let ret = [];
            for(let i=0; i < commList.length; i++){
                ret.push(<option>{commList[i]}</option>)
            }
            return ret;
        }
    }

    render(){
        return(
            <Frame header="待申请中的支付宝账号">
                <Table ref="table" count={this.pageCount} pageOnClick={(page,pageSize)=>this.updateTable(page,pageSize)}>
                    <thead>
                        <tr>
                            <th>商户账号名</th>
                            <th>支付宝账号名</th>
                            <th>申请时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    {
                        this.state.customers.length > 0?this.state.customers.map((customer)=>{
                            return(
                                <tr>
                                    <td><a onClick={()=>this.view(customer.appId)} style={{cursor : "pointer"}}>{customer.creator}</a></td>
                                    <td>{customer.mchId}</td>
                                    <td>{customer.time}</td>
                                    <td>
                                        <Button btnType="normal" size="xs" onClick={()=>this.complete(customer.id)}>完成</Button>
                                    </td>
                                </tr>
                            )
                        }):''
                    }
                    </tbody>
                </Table>

                <Modal ref="modalUserDetail" title="用户详情">
                    <Table>
                        <tr>
                            <td>用户名</td>
                            <td>{this.state.userView.userName}</td>
                        </tr>
                        <tr>
                            <td>角色名</td>
                            <td>{this.state.userView.roleName}</td>
                        </tr>
                        <tr>
                            <td>最大小区数目</td>
                            <td>{this.state.userView.commCount}</td>
                        </tr>
                        <tr>
                            <td>管辖小区</td>
                            <td>
                                <Form size="sm">
                                    <Select>
                                        {this.getUserCommsSelect(this.state.userView.commCode)}
                                    </Select>
                                </Form>
                            </td>
                        </tr>
                        <tr>
                            <td>最近登录</td>
                            <td>{this.state.userView.lastLogTime}</td>
                        </tr>
                    </Table>
                </Modal>
            </Frame>
        )
    }

}

ReactDOM.render(<PayCustAliApplying/>,document.getElementById("PayCustAliApplying"));